<template>
    <div>
        <h3>toRef</h3>
        <b
            >把响应式数据中的某个属性 aaa.name 变成单独的 ref 对象
            name，aaa.name 与 name 双向关联</b
        >
        <div>
            <p>{{ aaa }}</p>
            <button @click="fun_aaa">修改对象</button>
            <p>
                <button @click="fun_name">change name</button>
                {{ name }}
            </p>
            <p>
                <button @click="fun_job">change job</button>
                {{ job }}
            </p>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive,
    toRefs,
    toRaw,
    markRaw,
    toRef,
} from "vue";
export default defineComponent({
    setup() {
        let aaa = reactive({
            name: "你大爷",
            job: "前端",
        });

        // 把响应式数据中的某个属性 aaa.name 变成单独的 ref 对象 name，aaa.name 与 name 双向关联
        let name = toRef(aaa, "name");

        // ref 创建的没有关联关系
        let job = ref(aaa.job);

        let methds = {
            fun_aaa: () => {
                aaa.name += "牛逼";
                aaa.job += "牛逼";
                console.log("aaa", aaa);
                console.log("name", name.value);
                console.log("job", job.value);
            },
            fun_name: () => {
                name.value += "牛逼";
                console.log("aaa", aaa);
                console.log("name", name.value);
            },
            fun_job: () => {
                job.value += "牛逼";
                console.log("aaa", aaa);
                console.log("name", name.value);
            },
        };
        return {
            aaa,
            name,
            job,
            ...methds,
        };
    },
});
</script>
